{% extends 'base.html' %}

{% block card_header %}
<span><a href="/index"> 读者管理 / </a></span><span>读者信息</span>
{% endblock %}


{% block card_body %}
    <!-- 搜索区域 -->
    <div class="layui-row">
        <div class="layui-row layui-col-md6">
            <form class="layui-form" method="post" id="searchform">
                <div class="layui-row">
                <div class="layui-row layui-col-md6">
                    <label class="layui-form-label">筛选条件：</label>
                    <div class="layui-input-block">
                        {{ form.option }}
                    </div>
                </div>

                <div class="layui-row layui-col-md6">
                    <label class="layui-form-label">关键词：</label>
                    <div class="layui-input-block">
                      {{ form.key(class="layui-input",placeholder="请输入搜索内容") }}
                    </div>
                </div>

            </div>
            </form>
        </div>
        <div class="layui-row layui-col-md6">
            <div class="layui-input-block" style="margin-left: 20px">
              <button class="layui-btn" lay-submit lay-filter="formDemo">
                  <i class="layui-icon layui-icon-search layuiadmin-button-btn" id="search2"></i>
              </button>
            </div>
        </div>
    </div>

    <!-- 数据表格区域 -->
    <div style="margin-top: 20px">
        <table id="readerinfo" lay-filter="readerinfo"></table>
    </div>

    <div id="borrowedbtn" hidden>
        <button type="button" class="layui-btn layui-btn-xs detailbtn">
        详情
        </button>
    </div>

{% endblock %}


{% block outest %}
    <!-- 弹出层表格 -->
    <table class="layui-table" id="layer" hidden>
        <colgroup>
            <col width="100">
            <col width="100">
            <col width="100">
            <col width="80">
            <col width="80">
            <col width="80">
        </colgroup>
        <thead>
            <tr>
              <th>书名</th>
              <th>作者</th>
              <th>出版社</th>
              <th>借阅者</th>
              <th>借阅时间</th>
              <th>到期时间</th>
            </tr>
        </thead>
        <tbody id="layerbody">

        </tbody>
    </table>
{% endblock %}


{% block script %}
<script src="../static/layui/layui.js"></script>
<script src="../static/jquery/jquery.min.js"></script>
<script>
layui.use(['layer'], function(){
    var layer = layui.layer
    {% for message in get_flashed_messages() %}
        layer.msg('{{ message }}');
    {% endfor %}
});

layui.use('form', function(){
  var form = layui.form;
});

layui.use('table', function(){
  var table = layui.table;
  <!-- 表格渲染 -->
  table.render({
    elem: '#readerinfo'
    ,height: 450
    ,url: '{{ url_for('main.userinfo_api') }}' //数据接口
    ,page: true //开启分页
    ,loading: true
    ,cols: [[ //表头
      {field: 'sno', title: '序号', width:60, fixed: 'left'}
      ,{field: 'name', title: '姓名', width:120, align:'center'}
      ,{field: 'gender', title: '性别', width:80, sort: true, align:'center'}
      ,{field: 'id', title: '证件号', width:110, align:'center'}
      ,{field: 'depart', title: '单位', width: 150, sort: true, align:'center'}
      ,{field: 'post', title: '职务', width: 160, align:'center'}
      ,{field: 'contact', title: '联系方式', width: 150, align:'center'}
      ,{field: 'room', title: '房间号', width: 160, align:'center'}
      ,{field: 'borrowed', title: '在借图书', width: 120, align:'center', templet: '#borrowedbtn'}
    ]],
      // 为表格内嵌按钮绑定点击事件
      done:function (){
          $('tr').css({'background-color': '#333', 'color': '#fff'});
        $(".detailbtn").click(function(e){
          //获得用户id
          var id = e.currentTarget.parentNode.parentNode.parentNode.childNodes[3].innerText
            console.log(id)
          //弹出层根据 id 请求数据并弹出
          layui.use('layer',function (){
              $.post('{{ url_for('main.readerdetail_api') }}', {id:id}, function(str){
                console.log(str)
                // 动态填充借阅者表格
                $("#layerbody").empty()
                for(var i=0; i< str.count; i++)
                {
                    $("#layerbody").append('<tr><td>'+str.data[i].bookname+'</td>'+
                                        '<td>'+str.data[i].author+'</td>'+
                                        '<td>'+str.data[i].press+'</td>'+
                                        '<td>'+str.data[i].borrower+'</td>'+
                                        '<td>'+str.data[i].start_date+'</td>'+
                                        '<td>'+str.data[i].end_date+'</td></tr>');
                }

                layer.open({
                type: 1,
                content:$("#layer"),
                skin: 'layui-layer-molv',
                area: '800px'
                });
              });
            })
        });
      }
  });

});

$("#search2").on('click',function (){
    var form = new FormData(document.getElementById("searchform"))
    console.log(form.getAll('key'))
    // ajax 请求数据， table渲染数据， 为 table 内嵌的按钮绑定点击事件
    $.ajax({
        url: "{{ url_for('main.searchreader_api') }}",
        type: "post",
        data: form,
        processData: false,
        contentType: false,
        success:function (data){
            console.log(data)
            layui.use('table', function(){
              var table2 = layui.table;
              <!-- 表格渲染 -->
              table2.render({
                elem: '#readerinfo'
                ,height: 450
                ,data:data.data
                ,page: true //开启分页
                ,loading: true
                ,cols: [[ //表头
                      {field: 'sno', title: '序号', width:60, fixed: 'left'}
                      ,{field: 'name', title: '姓名', width:120, align:'center'}
                      ,{field: 'gender', title: '性别', width:80, sort: true, align:'center'}
                      ,{field: 'id', title: '证件号', width:110, align:'center'}
                      ,{field: 'depart', title: '单位', width: 150, sort: true, align:'center'}
                      ,{field: 'post', title: '职务', width: 160, align:'center'}
                      ,{field: 'contact', title: '联系方式', width: 150, align:'center'}
                      ,{field: 'room', title: '房间号', width: 160, align:'center'}
                      ,{field: 'borrowed', title: '在借图书', width: 120, align:'center', templet: '#borrowedbtn'}
                    ]]
                  //必须等表格渲染完成后才能绑定事件
                ,done:function (){
                      $('tr').css({'background-color': '#333', 'color': '#fff'});
                    $(".detailbtn").click(function(e){
                      //获得用户id
                      var id = e.currentTarget.parentNode.parentNode.parentNode.childNodes[3].innerText
                        console.log(id)
                      //弹出层根据 id 请求数据并弹出
                      layui.use('layer',function (){
                          $.post('{{ url_for('main.readerdetail_api') }}', {id:id}, function(str){
                            console.log(str)
                            // 动态填充借阅者表格
                            $("#layerbody").empty()
                            for(var i=0; i< str.count; i++)
                            {
                                $("#layerbody").append('<tr><td>'+str.data[i].bookname+'</td>'+
                                                    '<td>'+str.data[i].author+'</td>'+
                                                    '<td>'+str.data[i].press+'</td>'+
                                                    '<td>'+str.data[i].borrower+'</td>'+
                                                    '<td>'+str.data[i].start_date+'</td>'+
                                                    '<td>'+str.data[i].end_date+'</td></tr>');
                            }

                            layer.open({
                            type: 1,
                            content:$("#layer"),
                            skin: 'layui-layer-molv',
                            area: '800px'
                            });
                          });
                        })
                    });
                  }
                });
            });
        }
    })
})
</script>
{% endblock %}